<template>
  <div class="main-container">
    <div class="left-panel">
      <h2 class="title">高德地图静态地图生成器</h2>
      <div class="form-group">
        <label>经度</label>
        <input v-model="longitude" type="text" placeholder="请输入经度" />
      </div>
      <div class="form-group">
        <label>纬度</label>
        <input v-model="latitude" type="text" placeholder="请输入纬度" />
      </div>
      <button class="btn-green" @click="addCurrentLocationMarker">➕添加当前位置标注</button>
      <div class="form-group slider-group">
        <label>缩放级别</label>
        <button @click="zoom--" :disabled="zoom<=1">-</button>
        <input type="range" min="1" max="17" v-model.number="zoom" />
        <input v-model.number="zoom" type="number" min="1" max="17" style="width:50px;" />
        <button @click="zoom++" :disabled="zoom>=17">+</button>
      </div>
      <div class="form-group">
        <label>地图大小</label>
        <select v-model="size">
          <option value="400*400">400x400</option>
          <option value="600*400">600x400</option>
          <option value="800*600">800x600</option>
        </select>
      </div>
      <div class="form-group radio-group">
        <label>图片质量</label>
        <label><input type="radio" value="1" v-model.number="scale" /> 普通图</label>
        <label><input type="radio" value="2" v-model.number="scale" /> 高清图</label>
      </div>
      <div class="form-group switch-group">
        <label>交通路况</label>
        <label class="switch">
          <input type="checkbox" v-model.number="traffic" true-value="1" false-value="0" />
          <span class="slider"></span>
        </label>
        <span>{{ traffic === 1 ? '显示' : '隐藏' }}</span>
      </div>
      <div class="form-group switch-group">
        <label>自动标注</label>
        <label class="switch">
          <input type="checkbox" v-model="autoMarker" />
          <span class="slider"></span>
        </label>
        <span>{{ autoMarker ? '启用' : '禁用' }}</span>
        <span class="tip">（启用后，输入的经纬度位置会自动显示标注点）</span>
      </div>
      <div class="divider"></div>
      <div class="marker-section">
        <div class="section-title">标注设置</div>
        <button class="btn-blue" @click="addMarker">添加标注</button>
        <ul class="item-list">
          <li v-for="(m, idx) in markers" :key="idx">
            <span>标注{{ idx+1 }}: {{ m.location }} {{ m.label ? ' - ' + m.label : '' }}</span>
            <button class="btn-small" @click="removeMarker(idx)">删除</button>
          </li>
        </ul>
        <!-- 自动标注时只显示只读的markersRaw输入框，手动标注时可手动输入 -->
        <div v-if="autoMarker" class="form-group">
          <label>自动标注参数</label>
          <input v-model="markersRaw" readonly style="background:#333;color:#fff;" />
        </div>
        <div v-else class="form-group">
          <label>自定义markersRaw</label>
          <input v-model="markersRaw" placeholder="如：mid,,A:经度,纬度" />
        </div>
      </div>
      <div class="marker-section">
        <div class="section-title">标签设置</div>
        <button class="btn-blue" @click="addLabel">添加标签</button>
        <ul class="item-list">
          <li v-for="(l, idx) in labels" :key="idx">
            <span>标签{{ idx+1 }}: {{ l.location }} - {{ l.content }}</span>
            <button class="btn-small" @click="removeLabel(idx)">删除</button>
          </li>
        </ul>
      </div>
      <div class="marker-section">
        <div class="section-title">路径设置</div>
        <button class="btn-blue" @click="addPath">添加路径</button>
        <ul class="item-list">
          <li v-for="(p, idx) in paths" :key="idx">
            <span>路径{{ idx+1 }}: {{ p.locations && p.locations.join(';') }}</span>
            <button class="btn-small" @click="removePath(idx)">删除</button>
          </li>
        </ul>
      </div>
      <div class="divider"></div>
      <div class="btn-group">
        <button class="btn-main" @click="generateMap">生成地图</button>
        <button class="btn-main" @click="resetForm">重置</button>
      </div>
    </div>
    <div class="right-panel">
      <div class="preview-title">地图预览</div>
      <div class="map-preview">
        <img v-if="mapImageUrl" :src="mapImageUrl" alt="地图预览" />
      </div>
      <div class="url-section">
        <div>地图URL：</div>
        <input class="url-input" v-model="mapUrl" readonly />
        <button class="btn-copy" @click="copyUrl">复制</button>
      </div>
      <button class="btn-download" @click="downloadMap" :disabled="!mapImageUrl">下载地图</button>
    </div>
  </div>
</template>

<script>
import { generateMapUrl, getMapImage } from '../api/mapApi.js'

export default {
  name: 'MapView',
  data() {
    return {
      longitude: '',
      latitude: '',
      zoom: 10,
      size: '400*400',
      scale: 1,
      traffic: 0,
      autoMarker: false,
      markers: [],
      labels: [],
      paths: [],
      markersRaw: '', // 新增字段，供用户输入原始markers字符串
      mapUrl: '',
      mapImageUrl: '',
    }
  },
  watch: {
    longitude() {
      this.handleAutoMarker()
    },
    latitude() {
      this.handleAutoMarker()
    },
    autoMarker() {
      this.handleAutoMarker()
    }
  },
  methods: {
    handleAutoMarker() {
      if (this.autoMarker && this.longitude && this.latitude) {
        // 自动标注时，检查是否已存在相同位置的自动标注
        const centerLocation = `${this.longitude},${this.latitude}`;
        const existingAutoMarker = this.markers.find(m => 
          m.location === centerLocation && m.label === 'A'
        );
        
        if (!existingAutoMarker) {
          // 添加自动标注到markers数组开头
          this.markers.unshift({
            location: centerLocation,
            style: 'mid',
            color: '0xFF0000',
            label: 'A',
          });
        }
      } else {
        // 关闭自动标注时，移除所有自动标注（label为'A'的marker）
        this.markers = this.markers.filter(m => m.label !== 'A');
      }
    },
    addCurrentLocationMarker() {
      if (this.longitude && this.latitude) {
        this.markers.push({
          location: `${this.longitude},${this.latitude}`,
          style: 'mid',
          color: '0xFF0000',
          label: 'A',
        })
      }
    },
    addMarker() {
      this.markers.push({
        location: `${this.longitude},${this.latitude}`,
        style: 'mid',
        color: '0xFF0000',
        label: 'A',
      })
    },
    removeMarker(idx) {
      this.markers.splice(idx, 1)
    },
    addLabel() {
      this.labels.push({
        location: `${this.longitude},${this.latitude}`,
        content: '', // 初始内容为空
        font: 0,
        bold: 0,
        fontSize: 10,
        fontColor: '0xFFFFFF',
        background: '0x5288d8',
      })
    },
    removeLabel(idx) {
      this.labels.splice(idx, 1)
    },
    addPath() {
      this.paths.push({
        weight: 5,
        color: '0x0000FF',
        transparency: 1.0,
        fillColor: '',
        fillTransparency: 0.5,
        locations: [ `${this.longitude},${this.latitude}` ],
      })
    },
    removePath(idx) {
      this.paths.splice(idx, 1)
    },
    async generateMap() {
      const mapData = {
        location: `${this.longitude},${this.latitude}`,
        zoom: this.zoom,
        size: this.size,
        scale: this.scale,
        traffic: this.traffic,
        markers: this.markers, // 自动标注已经在handleAutoMarker中处理
        labels: [], // 不传递labels参数，因为我们要的是markers标注
        paths: this.paths,
      };
      
      const urlRes = await generateMapUrl(mapData)
      this.mapUrl = urlRes.url
      this.mapImageUrl = await getMapImage(mapData)
    },
    resetForm() {
      this.longitude = ''
      this.latitude = ''
      this.zoom = 10
      this.size = '400*400'
      this.scale = 1
      this.traffic = 0
      this.autoMarker = false
      this.markers = []
      this.labels = []
      this.paths = []
      this.markersRaw = '' // 重置markersRaw
      this.mapUrl = ''
      this.mapImageUrl = ''
    },
    copyUrl() {
      navigator.clipboard.writeText(this.mapUrl)
    },
    async downloadMap() {
      if (!this.mapImageUrl) return
      const a = document.createElement('a')
      a.href = this.mapImageUrl
      a.download = 'gaode_map.png'
      a.click()
    }
  }
}
</script>

<style scoped>
.main-container {
  display: flex;
  height: 100vh;
  background: #181c24;
  color: #fff;
}
.left-panel {
  width: 420px;
  background: #232733;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.right-panel {
  flex: 1;
  background: #181c24;
  padding: 32px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.title {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  text-align: center;
}
.form-group {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-group label {
  width: 80px;
  color: #bfc6d1;
}
.form-group input,
.form-group select {
  flex: 1;
  padding: 6px 8px;
  border-radius: 4px;
  border: none;
  background: #232733;
  color: #fff;
  outline: none;
}
.slider-group input[type="range"] {
  width: 120px;
}
.radio-group label {
  margin-right: 16px;
  color: #bfc6d1;
}
.switch-group {
  align-items: center;
  gap: 8px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #444a5a;
  border-radius: 20px;
  transition: .4s;
}
.switch input:checked + .slider {
  background-color: #2196F3;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}
.switch input:checked + .slider:before {
  transform: translateX(16px);
}
.tip {
  font-size: 12px;
  color: #888;
  margin-left: 8px;
}
.divider {
  border-bottom: 1px solid #333;
  margin: 16px 0;
}
.marker-section {
  margin-bottom: 10px;
}
.section-title {
  font-size: 15px;
  color: #bfc6d1;
  margin-bottom: 4px;
}
.btn-group {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.btn-main {
  background: #2196F3;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 15px;
  cursor: pointer;
}
.btn-main:hover {
  background: #1976d2;
}
.btn-blue {
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 13px;
  margin-bottom: 6px;
  cursor: pointer;
}
.btn-blue:hover {
  background: #2563eb;
}
.btn-green {
  background: #4ade80;
  color: #232733;
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 13px;
  margin-bottom: 6px;
  cursor: pointer;
}
.btn-green:hover {
  background: #22c55e;
}
.btn-small {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  margin-left: 8px;
  cursor: pointer;
}
.btn-small:hover {
  background: #b91c1c;
}
.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.item-list li {
  margin-bottom: 4px;
  font-size: 13px;
  color: #bfc6d1;
}
.right-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.preview-title {
  font-size: 18px;
  color: #fff;
  margin-bottom: 12px;
}
.map-preview {
  width: 400px;
  height: 400px;
  background: #232733;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-bottom: 18px;
}
.map-preview img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.url-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.url-input {
  width: 340px;
  background: #232733;
  color: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 8px;
}
.btn-copy {
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}
.btn-copy:hover {
  background: #3730a3;
}
.btn-download {
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 18px;
  font-size: 15px;
  cursor: pointer;
}
.btn-download:disabled {
  background: #444a5a;
  color: #888;
  cursor: not-allowed;
}
</style> 